<template>
  <view class="article-container">
    <view class="article-title">李氏家谱简介</view>
    <view class="article-meta">
      <text>撰稿人：李家后人</text>
      <text class="article-date">2024年5月</text>
    </view>
    <view class="article-content">
      <view class="article-section">
        <view class="section-title">一、家谱缘起</view>
        <view class="section-paragraph">
          李氏家族自明代迁徙至广东，历经数百年，枝繁叶茂。为传承家族文化、弘扬祖德，特于2024年修订本家谱，记录家族世系、人物事迹及重要历史事件。
        </view>
      </view>
      <view class="article-section">
        <view class="section-title">二、家族源流</view>
        <view class="section-paragraph">
          李氏起源于太原堂，明代由福建迁徙至广东，逐步形成多个分支。家族成员遍布海内外，尤以广东、东南亚为盛。
        </view>
      </view>
      <view class="article-section">
        <view class="section-title">三、家谱特色</view>
        <view class="section-paragraph">
          本家谱采用现代编修方法，结合世系图、人物传记、历史照片等多种资料，力求真实、详实、易于传承。家谱内容包括序言、源流、世系、人物志、附录等部分。
        </view>
      </view>
      <view class="article-section">
        <view class="section-title">四、家族精神</view>
        <view class="section-paragraph">
          李氏家族秉承“敦亲睦族、尊祖敬宗、励志图强”的家训，鼓励后人团结进取、报效社会。
        </view>
      </view>
      <view class="article-section">
        <view class="section-title">五、结语</view>
        <view class="section-paragraph">
          家谱是家族的根，是后人的灯塔。希望本家谱能成为李氏子孙了解家族、凝聚亲情的重要纽带。
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 可根据需要添加逻辑
</script>

<style scoped>
.article-container {
  padding: 32rpx 20rpx;
  background: #f9f7f3;
}
.article-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #e95d2a;
  text-align: center;
  margin-bottom: 18rpx;
  letter-spacing: 2rpx;
}
.article-meta {
  display: flex;
  justify-content: center;
  gap: 24rpx;
  color: #bfa36b;
  font-size: 24rpx;
  margin-bottom: 18rpx;
}
.article-date {
  font-size: 22rpx;
}
.article-cover {
  width: 100%;
  height: 220rpx;
  object-fit: cover;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  background: #f5e9da;
}
.article-content {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.06);
  padding: 24rpx 20rpx;
}
.article-section {
  margin-bottom: 28rpx;
}
.section-title {
  font-size: 30rpx;
  color: #409eff;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.section-paragraph {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
  text-indent: 2em;
}
</style>
